<template>
  <div id="home">
    <Header></Header>
    <Swiper :list='homeData.swiperList'></Swiper>
    <Icons :icons='homeData.iconList'></Icons> 
    <Recommend :recommendList='homeData.recommendList'></Recommend>
    <weekendRecommend :weekendList='homeData.weekendList'></weekendRecommend>
  </div>
</template>

<script>
import Header from './components/Header'
import Swiper from './components/Swiper'
import Icons from './components/Icons'
import Recommend from './components/Recommend'
import weekendRecommend from './components/weekendRecommend'
import axios from 'axios'
import {mapState} from 'vuex'
export default {
  name:'Home',
  data () {
    return {
      homeData:{},
      lastCity: ''
    }
  },
  mounted () {
    this._initData()
    this.lastCity = this.city
    console.log(this.lastCity)
  },
  activated () {
    if(this.lastCity !== this.city) {
      this.lastCity = this.city
      this._initData()
    }
  },
  methods : {
    _initData () {
      axios.get('./static/mock/index.json')
        .then(({data})=> {
          console.log(data.data)
          this.homeData = data.data
        })
    }
  },
  computed: {
    ...mapState(['city'])
  },
  components: {
    Header,
    Swiper,
    Icons,
    Recommend,
    weekendRecommend
  }
}
</script>

<style lang="stylus" scoped>

</style>